<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 假设您已经正确引入了Vue.js -->
  <script src="./vue.js"></script>
</head>

<body>
  <div id="app">
    {{ num }}<button @click="num++">+</button>
    <q-header :a="num" title="首页"></q-header>
    <button class="simple-button">点击我</button>
  </div>

  <style>
    .header {
      font-size: 20px;
      margin: 10px;
      padding: 5px;
      background-color: #f0f0f0;
    }

    .simple-button {
      background-color: #4CAF50;
      /* 绿色 */
      border: none;
      color: white;
      padding: 15px 32px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin: 4px 2px;
      cursor: pointer;
      border-radius: 4px;
    }

    .simple-button:hover {
      background-color: red;
    }
  </style>

  <script>
    const { createApp, ref } = Vue;

    const app = createApp({
      setup() {
        let num = ref(1);
        return {
          num
        };
      }
    });

    // component 组件  
    app.component('q-header', {

      props: {
        a: [Number, String],
        title: String
      },
      template: `<div class="header">  
        {{ a }}  
        {{ title }}  
      </div>`
    });

    app.mount('#app');  
  </script>
</body>

</html>